<template>
  <div class="clock">
    <div class="a">
      <div class="b"><clock_item :clockNumber="c_1" /></div>
      <div class="b"><clock_item :clockNumber="c_2" /></div>
      <div class="c"><clock_sub /></div>
      <div class="b"><clock_item :clockNumber="c_3" /></div>
      <div class="b"><clock_item :clockNumber="c_4" /></div>
      <div class="c"><clock_sub /></div>
      <div class="b"><clock_item :clockNumber="c_5" /></div>
      <div class="b"><clock_item :clockNumber="c_6" /></div>
    </div>
  </div>
</template>

<script>
  import clock_item from './clock_item.vue'
  import clock_sub from './clock_sub.vue'
  export default {
    name: "clock",
    data() {
      return {
        c_1: null,
        c_2: null,
        c_3: null,
        c_4: null,
        c_5: null,
        c_6: null,
        playFlag: true
      }
    },
    components: {
      clock_item,
      clock_sub
    },
    created() {
      this.getDate()
    },
    methods: {
      getDate() {
        let timer = this.timer;
        timer = setInterval(() => {
          let cd = new Date();
          this.formatDate(cd);
        }, 1000);
      },
      formatDate(cd) {
        let h = cd.getHours()<10?('0'+cd.getHours()):cd.getHours();  // 小时
        let m = cd.getMinutes()<10?('0'+cd.getMinutes()):cd.getMinutes();  // 分钟
        let s = cd.getSeconds()<10?('0'+cd.getSeconds()):cd.getSeconds();  // 秒
        this.c_1 = Number(h.toString().slice(0,1));
        this.c_2 = Number(h.toString().slice(1));
        this.c_3 = Number(m.toString().slice(0,1));
        this.c_4 = Number(m.toString().slice(1));
        this.c_5 = Number(s.toString().slice(0,1));
        this.c_6 = Number(s.toString().slice(1));
      }
    }
  }
</script>

<style scoped lang="scss">
  .clock {
    height: 50px;
    .a{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .b{
        width: 16px;
        height: 30px;
      }
      .c{
        width: 10px;
        height: 30px;
      }
    }
  }
</style>
